<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script type='text/javascript' src='../js/vue.js'></script>
    <script type='text/javascript' src='../js/vue-router.js'></script>

    <style>
        .router-link-exact-active {
            color: red;
        }
    </style>
</head>

<body>
    <div id='app'>

        <!-- 1、创建结构 -->
        <router-link to="/tab1/1">tab1</router-link>
        <router-link to="/tab1/2">tab2</router-link>

        <!-- 3、提供坑位 -->
        <router-view></router-view>

    </div>
    <script type='text/javascript'>
        // <!-- 2、创建组件 -->
    

        var tab1 = {
            template: `<h1>我是tab1组件=={{$route.params.id}}===</h1>`
        }

        var tab2 = {
            template: `<h1>我是tab2组件</h1>`
        }

        /* 4、创建路由匹配规则 */
        /* 
        1、引入路由js文件
        2、创建路由对象
        3、routes=======   =====[route  router  routes  $router]
        
        */
        const router = new VueRouter({
            routes: [
                { path: '/',redirect: '/tab1/1'},
                { path: '/tab1/:id',component: tab1},
                // { path: '/tab2', component: tab2 }
            ]
        })

        /* 5、将router跟vue扯上关系=====进行挂载 */

        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            },
           
            router,
            watch:{
                "$route"(newV,oldV){
                    console.log(newV,oldV);
                }
            }
        });
    </script>
</body>

</html>